<script setup lang="ts">
import Header from '../components/layout/Header.vue'
import Footer from "../components/layout/Footer.vue";
import {RouterView} from "vue-router";
import TodoEditDialog from '../components/dialog/TodoEditDialog.vue';
import { provide, ref,useTemplateRef } from 'vue';
const dialog_todo_ref = useTemplateRef<InstanceType<typeof TodoEditDialog>>('dialog_todo');
provide('dialog_todo_ref', dialog_todo_ref);
</script>

<template>
  <div class="container mx-auto grid min-h-screen" style="grid-template-rows: auto 1fr auto;">
    <Header></Header>
    <RouterView v-slot="{Component}">
      <KeepAlive exclude="TodoDetail">
        <Component :is="Component"/>
      </KeepAlive>
    </RouterView>
    <Footer></Footer>
  </div>
  <TodoEditDialog ref="dialog_todo"/>

</template>

<style scoped>

</style>